<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Video Stream Client</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black; /* 设置背景颜色 */
        }
        #localVideo {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 确保视频填充整个屏幕 */
        }
        #shouImage {
            position: absolute; /* 绝对定位 */
            top: 30%; /* 距离顶部的距离 */
            left: 30%; /* 距离左侧的距离 */
            width: 300px; /* 图片宽度 */
            height: auto; /* 图片高度自动调整 */
            z-index: 2; /* 确保图片在视频上方 */
        }
        #cuoImage {
            position: absolute; /* 绝对定位 */
            top: 3%; /* 距离顶部的距离 */
            left: 90%; /* 距离左侧的距离 */
            width: 55px; /* 图片宽度 */
            height: auto; /* 图片高度自动调整 */
            z-index: 1; /* 确保图片在视频上方 */
        }
        #kuangImage {
            position: absolute; /* 绝对定位 */
            top: 25%; /* 距离顶部的距离 */
            left: 5%; /* 距离左侧的距离 */
            width: 90%; /* 图片宽度 */
            height: auto; /* 图片高度自动调整 */
            z-index: 1; /* 确保图片在视频上方 */
        }
        #AIImage {
            position: absolute; /* 绝对定位 */
            top: 80%; /* 距离顶部的距离 */
            left: 20%; /* 距离左侧的距离 */
            width: 15%; /* 图片宽度 */
            height: auto; /* 图片高度自动调整 */
            z-index: 1; /* 确保图片在视频上方 */
        }
        #title {
            position: absolute; /* 绝对定位 */
            top: 3%; /* 距离顶部的距离 */
            left: 50%; /* 水平居中 */
            transform: translateX(-50%); /* 使文本水平居中 */
            color: white; /* 文本颜色 */
            font-size: 55px; /* 文本大小 */
            font-weight: bold; /* 文本加粗 */
            background-color: rgba(0, 0, 0, 0); /* 透明背景 */
            z-index: 1; /* 确保文本在视频上方 */
        }
        #action {
            position: absolute; /* 绝对定位 */
            top: 53%; /* 距离顶部的距离 */
            left: 50%; /* 水平居中 */
            transform: translateX(-50%); /* 使文本水平居中 */
            color: white; /* 文本颜色 */
            font-size: 40px; /* 文本大小 */
            background-color: rgba(0, 0, 0, 0); /* 透明背景 */
            z-index: 2; /* 确保文本在视频上方 */
        }
        #translate {
            position: absolute; /* 绝对定位 */
            top: 83%; /* 距离顶部的距离 */
            left: 55%; /* 水平居中 */
            transform: translateX(-50%); /* 使文本水平居中 */
            color: white; /* 文本颜色 */
            font-size: 40px; /* 文本大小 */
            background-color: rgba(0, 0, 0, 0); /* 透明背景 */
            z-index: 2; /* 确保文本在视频上方 */
        }
    </style>
</head>
<body>
<video id="localVideo" width="100%" height="100%" autoplay="autoplay" ></video>
<div id="title">实时翻译</div>
<img id="cuoImage" src="media/cuocha.png" alt="Overlay Image">
<img id="shouImage" src="media/shou.png" alt="Overlay Image">
<img id="kuangImage" src="media/kuang.png" alt="Overlay Image">
<div id="action">请做出手语动作</div>
<div>
    <img id="AIImage" src="media/jiqiren.png" alt="Overlay Image">
    <div id="translate">我将会为您实时翻译哦</div>
</div>
<script>
    const localVideo = document.getElementById('localVideo');
    const socket = new WebSocket('ws://1.95.63.100:8080/ws');

    let currentCamera = 'environment'; // 当前使用的摄像头，默认为前置摄像头

    // 获取摄像头视频流
    function getCameraStream(facingMode) {
        navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: facingMode // 指定摄像头方向
            }
        })
        .then(stream => {
            if (localVideo.srcObject) {
                localVideo.srcObject.getTracks().forEach(track => track.stop()); // 停止当前视频流
            }
            localVideo.srcObject = stream; // 显示视频流到 <video> 元素
            console.log(`Camera stream started with facingMode: ${facingMode}`);

            // 初始化视频处理器并开始发送视频帧
            const videoTrack = stream.getVideoTracks()[0];
            const videoProcessor = new VideoProcessor(videoTrack);
            videoProcessor.startSending(socket);
        })
        .catch(error => {
            console.error("Error accessing camera:", error);
            alert("Failed to access camera: " + error.message);
        });
    }


    window.onload = () => {
        document.getElementById('switchCameraButton').addEventListener('click', () => {
            currentCamera = currentCamera === 'user' ? 'environment' : 'user';
            getCameraStream(currentCamera);
            document.getElementById('switchCameraButton').innerText = currentCamera === 'user' ? '切换到后置摄像头' : '切换到前置摄像头';
        });
    };

    // 初始化默认摄像头，页面加载时，调用 getCameraStream 函数，初始化默认摄像头（前置摄像头）
    getCameraStream(currentCamera);

    class VideoProcessor {
        constructor(track) {
            this.track = track;
            this.canvas = document.createElement('canvas');
            this.context = this.canvas.getContext('2d');
        }

        startSending(socket) {
            const frameInterval = 1000 / 10; // 30 FPS，每 100 毫秒（30 FPS）捕获一帧
            setInterval(() => {
                try {
                    this.canvas.width = this.track.getSettings().width;
                    this.canvas.height = this.track.getSettings().height;
                    this.context.drawImage(localVideo, 0, 0, this.canvas.width, this.canvas.height);

                    // 将 Canvas 内容转换为 JPEG 图像
                    const frameData = this.canvas.toDataURL('image/jpeg', 0.5); // JPEG 格式，质量为 0.5
                    socket.send(frameData); // 发送给服务器
                    console.log("Sent frame data.", frameData);
                } catch (error) {
                    console.error("Error processing video frame:", error);
                }
            }, frameInterval);
        }
    }

    socket.onopen = () => {
        console.log("Connection established successfully.");
    };

    socket.onmessage = (event) => {
        console.log("Received message from server:", event.data);
    };

    socket.onclose = (event) => {
        console.log("Connection closed:", event.reason);
    };

    socket.onerror = (error) => {
        console.error("Connection error:", error);
        alert("WebSocket connection error: " + error.message);
    };
</script>
</body>
</html>